class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });

    const wrapper = document.createElement('div');

    // 获取 custom-attribute 属性的值
    const customAttributeValue = this.getAttribute('custom-attribute') || 'Default Value';

    wrapper.innerHTML = `
      <style>
        h1 {
          color: blue;
        }
        p {
          font-size: 16px;
          color: green;
        }
      </style>
      <h1>Hello, Web Components! ${customAttributeValue}</h1>
      <p>This is a custom element.</p>
    `;

    shadowRoot.appendChild(wrapper);
  }

  connectedCallback() {
    console.log('MyCustomElement has been added to the DOM.');
  }

  static get observedAttributes() {
    return ['custom-attribute'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    name = newValue
    console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`);
  }
}

customElements.define('my-custom-element', MyCustomElement);